$text-color:white;
$text-color-hover:rgba(125, 125, 123, 0.7);
$hide-color:rgba(125, 125, 123, 0.0);

$header-color:rgba(125, 125, 123, 0.5);
$color-one:gray;
$font-family-impact: Impact, fantasy;

$color-footer-text-hover:black;
#container * {
    margin:  auto;
}
body {
    background-color: rgba(210, 210, 210, 0.5);
    margin: 0 auto;
}
.adrenaline {
    visibility: hidden;
}

header {
    background-color: $color-one;
    background-image: url("http://idg.bg/test/pcw/2013/5/23/21117-Call-of-Duty-Ghosts-1.jpg");
    background-repeat: no-repeat;
    background-position: center;
    
}
.logo {
    width:200px;
    height: 100px;
    background-color: rgba(210, 210, 210, 0.5);
    background-image: url("http://www.gunlife.org/store/secure/images/products/172.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity:0.8;

}
.container-menu {
    width: 200px;
    color:$text-color;
    text-align: center;
    padding-top: 8px;


    .menu-button {
        padding-bottom: 10px;
        font-size: 20px;
        font-family: $font-family-impact;
    }
    .menu-button:hover {
        color: $text-color-hover;
    }
}

.best-players, .shortly-about-us {
    padding-bottom:50px;
    width:100%;


    h2 {
        padding-bottom: 20px;
        font-family: $font-family-impact;

    }
    thead td{
        border-bottom: 1px solid $color-one;
    }
    td {
        width:90%;
        font-size: 1.5em;
        font-family: $font-family-impact;
        color:$color-one;
    }
    .img-us {
        width:100%;
        height:200px;
        background-image: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSFb_hd6aHTef9kphSLJMmjl1I-O5vkRC-Fm6xYxFSBo8Z4lvKpGQ");
        background-repeat: no-repeat;
        background-size: 100% 200%;
        background-position-x: center;
        background-position-y: 0px;

    }
    div {
        font-family: $font-family-impact;
        color: $color-one;
    }
        
}

section {

    width:80%;
    .programer-info {
        padding-bottom:50px;
        .our-team {
            text-align: center;
            font-family:  $font-family-impact;
            font-size: 3em;
        }
        .programer-info-box{
        padding-top: 50px;
        padding-bottom:50px;

            .programer-img {
                width: 200px;
                height: 200px;
                border-radius: 100px;
                background-color: $color-one;
                background-image: url("http://www.nacelayp.com/wp-content/uploads/2014/01/facefind-the-perfect-eyebrow-shape-for-your-faceshape-fashion-and-styles-4ahxlozu.jpg");
                background-repeat: no-repeat;
                background-position: center;
                background-size: auto 100%;

            }
            .programer-img:hover {
                background-image: url("");
                opacity: 0.5;
            }

            h2 {
                text-align: center;
                font-family: $font-family-impact;
                color:  $color-one;
            }

            .this-wokr {
                width: 180px;
                text-align: center;
            }
        }

    }  

}
footer {
    height: 200px;
    background-color: $color-one;

    .footer-nav {
        float:left;
        padding: 0px;
        padding-top: 20px;
        padding-left: 15%;
        padding-right: 15%;
        width:20%;
        text-align: center;
        list-style-type:none;

        li {
            padding:10px;
            a {
                text-decoration: none;
                color:$text-color;
                font-family:  $font-family-impact;
            }
            a:hover {
                color:$color-footer-text-hover;
            }
        }
    }
}
@media screen and (min-width : 365px) {
    header {
        padding-top:30px;
        height:366px; 
        background-size: 600px 100%;
        
    }
    
    .menu {
        padding: 0px;
        text-align: center;    
        list-style-type:none;
        li a {
            border-top: 1px solid black;
            padding-top:7px;
            padding-bottom:7px;
            display: block;
            text-decoration: none;
            font-size: 1.2em;
            color: $text-color;
        }
        li a:hover {
            background-color: $text-color-hover;
        }
    }
    .container-menu:hover {
        background-color: $header-color;
    }
    .container-menu .menu{
        display: none;
    }
    .container-menu:hover .menu{
        display: block;
    } 
    
    
}
@media screen and (min-width : 818px) {
    header {
        padding-top:30px;
        padding-left:5%;
        padding-right:5%;
        height:333px;
        background-size:  100%;
    }
        
    .container-menu {
        width:100%;
        .menu-button {
            padding-bottom: 0px;
            font-size: 0px;
        }
        
        .menu{
            width:100%;
            opacity: 1;
            display: block;
              
            li{
                width: 16.66%;
                float:left;
                
                a {
                    background-color: $header-color;
                    display: block;
                    text-decoration: none;
                    font-size: 1.5em;
                    
                }
                a:hover {
                    background-color:$text-color-hover;
                    
                }
            }
        }
    }
    section {   
        width:100%;
        
        .programer-info {
            padding-top: 50px;
            width: 100%;
            .programer-info-box {
                float:left;
                width:15%;
                padding-left: 5%;
                padding-right: 5%;
                
            }
            .programer-img {
                float:left;
                width: 180px;
                height: 180px;
                border-radius: 90px;
             
            }
            h2 {
                text-align: center;
                font-family: $font-family-impact;
                color:  $color-one;
            }
        }
        .best-players, .shortly-about-us {
            width:40%;
            padding:5%;
            float:left;
        }
    }
    .container-menu:hover {
        background-color: $hide-color;
    }
    
}
@media screen and (min-width : 1024px) {
    header {
        height:555px;
        padding-left: 15%;
        padding-right: 15%;
    }
    .logo {
        float:left;       
    }
    .container-menu {
        padding-top: 50px;
        width:100%;
    }
    .adrenaline {
        visibility: visible;
        font-family:  $font-family-impact;
        font-size: 3em;
        padding-top: 200px;
        text-align: center;
        color:$text-color;
    }
    section {
        
        width:80%;
        
        .programer-info{
            padding-top: 50px;
            width: 100%;
            
            h2 {
                text-align: center;
                font-family: $font-family-impact;
                color:  $color-one;
            }
        }
    }
}
.left {
    float:left;
}
#content {
     background-color:$text-color-hover;
}
.clearfix {
    clear: both;
}